<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
       <a-row :gutter="24">
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-model-item label="收支属性">
              <j-dict-select-tag
                v-model="queryParam.cashType"
                placeholder="请选择收支属性"
                dict-code="xy_park_cash_type"
              >
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-model-item label="业主信息">
              <j-popup
                v-model="queryParam.ownerCode"
                org-fields="owner_code"
                dest-fields="ownerCode"
                field="ownerCode"
                code="v_xy_park_owner"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-model-item label="收支账户">
              <j-popup
                v-model="queryParam.customerAccount"
                org-fields="park_number"
                dest-fields="customerAccount"
                field="customerAccount"
                code="v_xy_park_account"
              />
            </a-form-model-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="收支方式">
                <j-dict-select-tag v-model="queryParam.cashMethod"  placeholder="请选择收支方式" dict-code="xy_park_cash_method"></j-dict-select-tag>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="费项名称">
                <j-popup
                  v-model="queryParam.costType"
                  org-fields="cost_type,cost_name,tax_rate"
                  dest-fields="costType,costName,taxRate"
                  field="costType"
                  code="v_xy_park_cost_type"
                />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="缴款日期" style="width:100%;">
                <j-date placeholder="开始日期" v-model="queryParam['paymentDate_begin']" style="width:calc(50% - 15px);"></j-date>
                <span class="group-query-strig">~</span>
                <j-date placeholder="结束日期" v-model="queryParam['paymentDate_end']" style="width:calc(50% - 15px);"></j-date>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="收支编码" style="width:100%;">
                <a-input placeholder="收支编码" v-model="queryParam['cashCode']"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button  type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
      <vxe-grid
        id="AuditList"
        keep-source
        ref="vxeTable"
        :height="null"
        v-bind="options"
        :expand-config="{accordion: true}"
        :sort-config="{trigger:'cell',remote:true}"
        :columns="columns"
        :data="dataSource"
        :edit-config="{trigger: 'click', mode: 'row',showStatus: true}"
        @checkbox-change="onSelectChange"
        @checkbox-all="onSelectChange"
        @cell-dblclick="handleCellHblclick"
        @toggle-row-expand="toggleRowExpand"
        @sort-change="onSortChange"
      >
      <template v-slot:toolbar_buttons>
        <div class="table-operator">
          <!-- <a-button type="primary" icon="form" @click="handleAuto">自动匹配</a-button> -->
        </div>
      </template>
      <template v-slot:toolbar_tools>
        <!-- <vxe-button style="margin-right:12px;" @click="handleExportXls('勾稽')" icon="vxe-icon--download" circle></vxe-button> -->
      </template>
      <template #action="{ row }">
        <template>
          <a v-if="!row.checkAmount || row.checkAmount < row.amount" @click="handleEdit(row)">自动匹配</a>
           <a-divider type="vertical"  v-if="!row.checkAmount || row.checkAmount < row.amount" />
          <a v-if="!row.checkAmount || row.checkAmount < row.amount" @click="handleManualEdit(row)">手动匹配</a>
        </template>
      </template>
      <template #content="{ row }">
        <div :style="{width:innerTableWidth}">
          <vxe-grid
            border
            resizable
            align="center"
            :columns="subCol"
            :data="subDataSource[row.cashCode] || []"
          >
            <template #action="{ row }">
              <a-popconfirm title="确定取消匹配吗?" @confirm="() => handleCancel(row)">
                <a >取消</a>
              </a-popconfirm>
            </template>
          </vxe-grid>
        </div>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    <AuditListModal ref="modalForm" @ok="() => this.loadData()" />
    <AutoAuditList ref="AutoAuditList" />
    <AuditManualListModal ref="AuditManualListModal" @ok="() => this.loadData()" />
  </a-card>
</template>

<script>

import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { getAction, postAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import AuditListModal from './modules/AuditListModal'
import AutoAuditList from './modules/AutoAuditList'
import AuditManualListModal from './modules/AuditManualListModal'
import JDate from '@/components/jeecg/JDate'
export default {
  name: 'AuditList',
  mixins: [VxeTableMixin],
  components: {
    AuditListModal,
    AutoAuditList,
    JDate,
    AuditManualListModal
  },
  data() {
    return {
      isorter: {
        column: 'cashCode',
        order: 'desc'
      },
      columns: [
        { type: 'expand', width: 40, slots: { content: 'content' }},
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '收支编码', field: 'cashCode', showOverflow: true },
        { title: '收支属性', field: 'cashType', showOverflow: true,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_type', row.cashType)
          } }},
        { title: '收支方式', field: 'cashMethod', showOverflow: true,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_method', row.cashMethod)
          } }},
        { title: '业主信息', field: 'xyParkOwner.ownerName' },
        { title: '费项名称', field: 'xyParkCostType.costName', width: 80, showOverflow: true },
        { title: '收支账户', field: 'customerAccount', showOverflow: true },
        { title: '发生金额', field: 'amount', showOverflow: true, sortable: true },
        { title: '已匹配金额', field: 'checkAmount', showOverflow: true },
        { title: '未匹配金额', field: 'c', showOverflow: true, slots: { default: ({ row }) => {
          return row.checkAmount ? row.amount - row.checkAmount : row.amount
        } }},
        { title: '备注', field: 'remark' },
        { title: '操作', width: 120, field: 'action', fixed: 'right', slots: { default: 'action' }}
      ],
      subCol: [
        { type: 'seq', width: 40 },
        { title: '账单编号', field: 'billCode' },
        { title: '账单类型', field: 'xyParkBill.billType', slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_bill_type', row.xyParkBill.billType)
        } }},
        { title: '应收/应付日期', field: 'xyParkBill.dueDate' },
        { title: '账单金额', field: 'xyParkBill.amount' },
        { title: '分配金额', field: 'checkAmount' },
        { title: '关联合同', field: 'xyParkBill.contractCode' },
        { title: '操作', width: 80, field: 'action', fixed: 'right', slots: { default: 'action' }}
      ],
      dataSource: [],
      url: {
        list: '/community/cash/list',
        edit: '/ledgerScore/ysLedgerScore/edit',
        billlist: 'community/cash/billlist',
        deleteAmount: '/community/cash/deleteAmount'
      },
      disableMixinCreated: true,
      innerTableWidth: 600,
      subDataSource: {}
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleEdit: function(record) {
      this.$refs.modalForm.edit(record)
    },
    handleManualEdit(record) {
      this.$refs.AuditManualListModal.edit(record)
    },
    handleAuto() {
      this.$refs.AutoAuditList.show()
    },
    toggleRowExpand({ row }) {
      getAction(this.url.billlist, { cashCode: row.cashCode }).then(res => {
        console.log(res)
        if (res) {
          this.$set(this.subDataSource, row.cashCode, res.result)
          this.subDataSource[row.cashCode] = res.result
        }
      })
    },
    handleCancel(data) {
      postAction(this.url.deleteAmount, data).then(res => {
        if (res.success) {
          this.$message.success('取消匹配成功')
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  },
  created() {
    this.loadData(1)
  },
  mounted() {
    this.$nextTick(() => {
      const columns = this.$refs.vxeTable.getColumnByField('action')
      const tableWidth = this.$refs.vxeTable.$el.clientWidth
      this.innerTableWidth = (tableWidth - columns.width - 30) + 'px'
    })
  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
